<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <el-row class="row-bg" type="flex" align="middle">
      <p style="padding: 0;margin: 0"><b>消息中心配置模板</b> 根据实际业务需求，配置相关通知提醒消息的消息内容
      </p>
    </el-row>
    <el-card class="acc-arch">
      <ft-pagination :current-page="1" :page-size="8" :total="totalRowNum" @pageChange="loadMessageTemplatePage">
        <div slot="toolbar" class="acc-arch__toolbar">
          <el-button type="primary" size="small" icon="joys-icon-refresh"
                     @click="loadMessageTemplatePage(pageIndex,pageSize)">刷新
          </el-button>
          <el-button style="margin-right: 20px" type="primary" size="small" icon="joys-icon-new" :disabled="disabled"
                     @click="add">新建
          </el-button>
          <message-template-select v-model="templateTypeId" @change="loadMessageTemplatePage(pageIndex,pageSize)"
                                   placeholder="请选择或输入模板类型"/>
          <el-input style="padding-left: 15px;width: 250px" v-model="messageContent" placeholder="请输入消息内容"
                    @change="loadMessageTemplatePage(pageIndex,pageSize)"/>
        </div>
        <el-table :data="messageTemplatePage" row-key="messageTemplateId">
          <el-table-column label="模板类型" prop="templateTypeId" align="left">
            <template slot-scope="scope">
              <message-template-select v-model="scope.row.templateTypeId" placeholder="请选择或输入模板类型"
                                       @change="changeTemplateType($event,scope.$index, scope.row)"
                                       v-if="scope.row.status=='editing'"></message-template-select>
              <span v-else>{{scope.row.templateTypeName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="模板名称" prop="templateName" align="left">
            <template slot-scope="scope">
              <el-input v-model="scope.row.templateName" v-if="scope.row.status=='editing'"></el-input>
              <span v-else>{{scope.row.templateName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息类型" prop="messageTypeId" align="left">
            <template slot-scope="scope">
              <message-type-select v-model="scope.row.messageTypeId"
                                   @change="changeMessageType($event,scope.$index, scope.row)"
                                   v-if="scope.row.status=='editing'"></message-type-select>
              <span v-else>{{scope.row.messageTypeName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息标题" prop="messageTitle" :show-overflow-tooltip="true" align="left" min-width="100">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit-outline" @click="editingMessageTitle(scope.$index, scope.row)"
                         v-if="scope.row.status=='editing'"></el-button>
              <span>{{scope.row.messageTitle}}</span>
            </template>
          </el-table-column>
          <el-table-column label="消息内容" prop="messageContentTemplate" :show-overflow-tooltip="true" align="left"
                           min-width="300">
            <template slot-scope="scope">
              <el-button type="text" icon="el-icon-edit-outline" @click="editingMessage(scope.$index, scope.row)"
                         v-if="scope.row.status=='editing'"></el-button>
              <span>{{scope.row.messageContentTemplate}}</span>
            </template>
          </el-table-column>
          <el-table-column label="发布媒介" prop="sendMediaCollection" align="left" min-width="100">
            <template slot-scope="scope">
              <el-checkbox-group v-model="scope.row.sendMediaCollection">
                <el-checkbox :label="item.sendMediaId" v-for="(item,index) in scope.row.sendMediaVOList"
                             :key="item.sendMediaId"
                             style="margin: 0px 0 0px 0;">
                  <ft-enum-select service-name="joys-admin" type-name="sendMedia" v-model="item.sendMedia"
                                  :editing="false">
                  </ft-enum-select>
                </el-checkbox>
              </el-checkbox-group>
            </template>
          </el-table-column>
          <el-table-column label="链接名称" prop="linkName" :show-overflow-tooltip="true" align="left" min-width="100">
            <template slot-scope="scope">
              <!--<el-input v-model="scope.row.linkName" v-if="scope.row.status=='editing'"></el-input>-->
              <el-button type="text" icon="el-icon-edit-outline" @click="editingLinkName(scope.$index, scope.row)"
                         v-if="scope.row.status=='editing'"></el-button>
              <span>{{scope.row.linkName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" min-width="120">
            <template slot-scope="scope">
              <el-button
                type="text" size="small"
                @click="save(scope.$index, scope.row)" v-if="scope.row.status=='editing'">保存
              </el-button>
              <el-button type="text" size="small" @click="cancel(scope.$index,scope.row)"
                         v-if="scope.row.status=='editing'">
                取消
              </el-button>
              <el-button
                size="mini"
                type="text"
                @click="handleEdit(scope.$index, scope.row)" v-if="scope.row.status!='editing'&&if_display=='Y'">修改
              </el-button>
              <em class="message_em_cs" v-if="scope.row.status!='editing'&&if_display=='Y'">|
              </em>
              <el-popover v-if="scope.row.status!='editing'"
                          placement="top"
                          width="160"
                          v-model="scope.row.delVisible">
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="small" type="text" @click="scope.row.delVisible = false">取消</el-button>
                  <el-button type="primary" size="small" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" type="text" size="small" style="color: #b96463">删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </ft-pagination>
    </el-card>
    <message-criterions ref="messageCriterionsRef" @setUpMessage="setUpMessage"></message-criterions>
  </div>
</template>

<script>
  import MessageTemplateSelect from "./messageSelect/MessageTemplateSelect";
  import FtExpression from "./Expression";
  import MessageCriterions from "./MessageCriterions";
  import MessageTypeSelect from "./messageSelect/MessageTypeSelect";

  export default {
    name: "MessageTemplate",
    components: {MessageTypeSelect, MessageCriterions, FtExpression, MessageTemplateSelect},
    data() {
      return {
        disabled: null,
        messageContent: null,
        messageTemplatePage: [],
        templateTypeId: null,
        if_display: "Y",
        totalRowNum: null,
        pageIndex: 1,
        pageSize: 8,
        editingIndex: 0,
        editingCell: null,
        //临时克隆对象，用于修改取消还原数据
        obj: {},
      }
    },
    methods: {
      //分页查询
      loadMessageTemplatePage(pageIndex, pageSize) {
        this.pageIndex = pageIndex || this.pageIndex || 1
        this.pageSize = pageSize || this.pageSize || 10
        this.messageTemplatePage = []
        this.disabled = null
        this.if_display = "Y"
        const url = '/joys-rest/joys-admin/messageTemplate/page'
        this.$http.get(url, {
          params: {
            templateTypeId: this.templateTypeId,
            messageTypeId: null,
            templateName: null,
            messageContentTemplate: this.messageContent,
            pageIndex: this.pageIndex,
            pageSize: this.pageSize
          }
        }).then(resp => {
          this.messageTemplatePage = resp.data.rows
          this.totalRowNum = resp.data.total
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      add() {
        this.messageTemplatePage.unshift({
          templateTypeId: null,
          templateTypeName: null,
          sendMediaCollection: [],
          sendMediaVOList: [],
          status: 'editing',
        })
        this.if_display = "N"
        this.disabled = true
      },
      changeMessageType(info, index, value) {
        value.messageTypeName = info.messageTypeName
        this.$set(this.messageTemplatePage, index, value)
      },
      // 改变模板类型
      changeTemplateType(info, index, value) {
        value.templateTypeName = info.templateTypeName
        this.loadSendMediaList(index, value, info.templateTypeId)
        this.$set(this.messageTemplatePage, index, value)
      },
      //查询模板类型的发布媒介
      loadSendMediaList(index, value, templateTypeId) {
        this.display = "Y"
        const url = '/joys-rest/joys-admin/sendMedia/list/' + templateTypeId
        this.$http.get(url).then(resp => {
          value.sendMediaVOList = resp.data
          this.$set(this.messageTemplatePage, index, value)
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      // 编辑消息标题
      editingMessageTitle(index, value) {
        this.editingCell = 'messageTitle'
        this.editingIndex = index
        this.$refs.messageCriterionsRef.templateTypeId = value.templateTypeId
        this.$refs.messageCriterionsRef.dialogVisible = true
        this.$refs.messageCriterionsRef.criterionExpression = value.messageTitle
      },
      // 编辑消息内容
      editingMessage(index, value) {
        this.editingCell = 'messageContentTemplate'
        this.editingIndex = index
        this.$refs.messageCriterionsRef.templateTypeId = value.templateTypeId
        this.$refs.messageCriterionsRef.dialogVisible = true
        this.$refs.messageCriterionsRef.criterionExpression = value.messageContentTemplate
      },
      // 编辑链接名称
      editingLinkName(index, value) {
        this.editingCell = 'linkName'
        this.editingIndex = index
        this.$refs.messageCriterionsRef.templateTypeId = value.templateTypeId
        this.$refs.messageCriterionsRef.dialogVisible = true
        this.$refs.messageCriterionsRef.criterionExpression = value.linkName
      },
      // 表达式值回写绑定的字段
      setUpMessage(val) {
        if (this.editingCell === 'messageTitle') {
          this.messageTemplatePage[this.editingIndex].messageTitle = val
        } else if (this.editingCell === 'messageContentTemplate') {
          this.messageTemplatePage[this.editingIndex].messageContentTemplate = val
        } else if (this.editingCell === 'linkName') {
          this.messageTemplatePage[this.editingIndex].linkName = val
        }
        this.$set(this.messageTemplatePage, this.editingIndex, this.messageTemplatePage[this.editingIndex])
      },
      save(index, value) {
        const url = '/joys-rest/joys-admin/messageTemplate/saveTemplate'
        this.$http.put(url, value).then(resp => {
          value = resp.data
          value.status = "noEditing"
          this.$set(this.messageTemplatePage, index, value)
          this.if_display = 'Y'
          this.disabled = null
          console.log(resp.data)
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }).catch(err => {
          this.$message.error(err.response.data.message)
        })
      },
      cancel(index, vo) {
        vo.status = "noEditing"
        this.if_display = 'Y'
        this.disabled = null
        if (vo.messageTemplateId != null) {
          //还原数据
          vo = JSON.parse(JSON.stringify(this.obj));
          vo.status = "noEditing"
          this.$set(this.messageTemplatePage, index, vo)
        } else {
          this.messageTemplatePage.splice(index, 1)
        }
      },
      handleEdit(index, vo) {
        vo.status = "editing"
        this.if_display = 'N'
        this.disabled = true
        //克隆，取消修改时使用
        this.obj = JSON.parse(JSON.stringify(vo));
      },
      handleDelete(index, vo) {
        const url = '/joys-rest/joys-admin/messageTemplate/' + vo.messageTemplateId
        this.$http.delete(url).then(resp => {
          this.messageTemplatePage.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        }, resp => {
          this.$message({
            type: 'failed',
            message: '删除失败!'
          })
        });
      }
    },
    watch: {
      templateTypeId: {
        handler(val) {
          console.log(val)
        },
      }
    }
  }
</script>

<style>
  .acc-arch__toolbar {
    display: flex;
    justify-content: flex-start;
  }
</style>
<style scoped>
  .button-bar {
    display: inline-block;
    width: 150px;
    padding: 8px 0;
    vertical-align: top;
  }

  .input-bar {
    display: inline-block;
    width: calc(100% - 210px);
    font-size: 0px;
    vertical-align: top;
  }

  .row-bg {
    height: 50px;
    background-color: #E4E8EB;
    font-size: 13px;
    padding-left: 20px;
  }
  .message_em_cs{
    font-family: PingFangSC-Regular;
    font-size: 13px;color:
    rgba(27,-2147483648,-2147483648,0.40);
    line-height: 13px;
    font-style:normal
  }
</style>
